<!-- 水位图配置 -->
<template>
    <div>
        <el-form-item label="水位图形状">
            <avue-select
                :disabled="disabled"
                v-model="main.activeOption.shape"
                :dic="dicOption.waterLevelType"
            >
            </avue-select>
        </el-form-item>
        <el-form-item label="水位图配色">
            <avue-input-color
                :disabled="disabled"
                v-model="main.activeOption.color"
            ></avue-input-color>
        </el-form-item>
        <el-form-item label="波浪数量">
            <avue-input-number
                v-model="main.activeOption.waveNum"
                :min="0"
                :disabled="disabled"
            ></avue-input-number>
        </el-form-item>
        <el-form-item label="波浪高度">
            <avue-input-number
                v-model="main.activeOption.waveHeight"
                :min="0"
                :disabled="disabled"
            ></avue-input-number>
        </el-form-item>
        <el-form-item label="波浪透明度">
            <avue-input-number
                v-model="main.activeOption.waveOpacity"
                :min="0"
                :max="1"
                :step="0.1"
                :disabled="disabled"
            ></avue-input-number>
        </el-form-item>
        <el-form-item label="信息格式化">
            <avue-input
                :disabled="disabled"
                placeholder="{value}%"
                v-model="main.activeOption.formatter"
            >
            </avue-input>
        </el-form-item>
    </div>
</template>

<script>
import { dicOption } from "@/option/config";
export default {
    name: "waterLevel",
    data() {
        return {
            dicOption: dicOption,
            disabled: this.contain.activeObj.isLock
        };
    },
    inject: ["main", "contain"]
};
</script>

<style></style>
